<template>
	<view class="o-h" :data-theme="theme()" :class="theme() || ''">
		<view class="bg-top"></view>
		<view class="task-center mb20">
			<view class="task-center-item d-s-c">
				<image lazy-load class="task-logo" :src="shopData.logos || '/static/shop-default.png'" mode="aspectFill">
				</image>
				<view class="flex-1">
					<view class="text-ellipsis f30 fb gray3 mb10">{{ shopData.store_name }}</view>
					<view class="h3 shop_info">
						<view class="d-s-c white f24 mb10" style="white-space: nowrap">
							<view class="pr d-s-c" style="white-space: nowrap">
								<view class="starts-box">
									<image lazy-load class="starts" v-for="(itmes, index) in getScore(shopData.server_score, 1)"
										:key="index" src="/static/icon/start-2.png" mode=""></image>
									<image lazy-load class="starts" v-if="getScore(shopData.server_score, 2)"
										src="/static/icon/start-1.png" mode=""></image>
								</view>
								<image lazy-load class="starts" v-for="(itmes, index) in 5" :key="index"
									src="/static/icon/start-0.png" mode=""></image>
							</view>
							<view style="color: #666666; white-space: nowrap; margin-right: 10rpx">
								{{ shopData.server_score }}分
							</view>
							<view style="color: #999999; white-space: nowrap">
								{{ shopData.fav_count }}人关注
							</view>
						</view>
					</view>
				</view>
				<button class="collected" @click="guanzhu()">
					{{ isfollow ? "已关注" : "+关注" }}
				</button>
			</view>
		</view>
		<view class="task-center1 mb20" v-if="false">
			<view class="task-center-item1 d-b-c" @click="opencat()">
				<text class="tiltles">联系客服</text>
				<text class="icon iconfont icon-kefu"></text>
			</view>
		</view>
		<view class="task-center2 mb20">
			<view class="task-center-item2 d-s-c" @click="openClick()">
				<text class="tiltles">商户简介</text>
				<view class="flex-1 tr f28 gray9">{{shopData.description || ''}}</view>
			</view>
			<view class="task-center-item2 d-s-c">
				<text class="tiltles">所在地区</text>
				<view class="flex-1 tr f28 gray9">{{ shopData.address }}</view>
			</view>
			<view class="task-center-item2 d-s-c">
				<text class="tiltles">开店时间</text>
				<view class="flex-1 tr f28 gray9">{{ shopData.create_time }}</view>
			</view>
		</view>
		<view class="task-center3 mb20">
			<view class="task-center-item3 d-s-c" @click="yulan(shopData.business_image,1)">
				<text class="tiltles">证件信息</text>
				<view class="flex-1"></view>
				<view>
					<text class="icon iconfont icon-he_15zhengzhaoguanli"></text>
					<text class="icon iconfont icon-jiantou"></text>
				</view>
			</view>
			<view class="task-center-item3 d-s-c">
				<text class="tiltles">保证金</text>
				<view class="flex-1 tr f28 gray9" v-if="shopData.status == 0">已缴纳</view>
				<view class="flex-1 tr f28 gray9" v-if="shopData.status !=0">未缴纳</view>
			</view>
		</view>
		<view v-if="showModal" class="modal">
			<view class="modal-mask"></view>

			<view class="modal-content">
				<text class="icon iconfont icon-guanbi close-icon" @click="cancelAction"></text>
				<view class="modal-header">
					<view class="modal-text">提示</view>
					<!-- <image lazy-load src="/static/imgs/提示.jpg" class="warning-icon"></image> -->
				</view>
				<view class="modal-body">
					<view>{{shopData.description || '暂无内容'}}</view>
				</view>

				<!-- <view class="modal-buttons">
            <button @click="cancelAction">确认</button>
          </view> -->
			</view>
		</view>
		<view class="">
			<button class="shop-btns" @click="clickFunc()">查看全部商品</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				invitation_id: 0,
				day_task: [],
				grow_task: [],
				back_image: "",
				shop_supplier_id: "", //商户ID
				shopData: {},
				isfollow: "", // 是否关注本店
				showModal: false,
			};
		},
		onLoad(option) {
			let self = this;
			self.shop_supplier_id = option.shop_supplier_id;
		},
		onShow() {
			this.getData();
		},
		methods: {
			opencat() {
				uni.showToast({
					title: "尚未设置客服",
					icon: "none", //如果要纯文本，不要icon，将值设为'none'
					duration: 1000, //持续时间为 2秒
				});
			},
			openClick() {
				this.showModal = true;
			},
			cancelAction() {
				this.showModal = false;
			},
			//关注商户/取消关注
			guanzhu() {
				let self = this;
				self._post(
					'user.Favorite/add', {
						pid: self.shop_supplier_id,
						type: 10
					},
					res => {
						if (self.isfollow == 0) {
							self.isfollow = 1;
						} else if (self.isfollow == 1) {
							self.isfollow = 0;
						}
					}
				);
			},
			clickFunc(e) {
				let self = this;
				let url = "";
				url = "/pages/shop/shop?shop_supplier_id=" + self.shop_supplier_id;
				if (url) {
					self.gotoPage(url);
				}
			},
			getScore(n, type) {
				n = n * 1;
				if (n <= 0 || !n) {
					return 0;
				}
				let num = n % 1;
				if (type == 1) {
					return n - num;
				}
				if (type == 2) {
					if (num == 0) {
						return 0;
					} else {
						return 1;
					}
				}
			},
			getData() {
				let self = this;
				self._get(
					"supplier.Index/detail", {
						shop_supplier_id: self.shop_supplier_id
					},
					(res) => {
						self.shopData = res.data.detail;
						self.isfollow = res.data.detail.isfollow;
					}
				);
			},
		},
	};
</script>

<style lang="scss">
	.reg180 {
		padding-right: 20rpx;
		text-align: right;
		transform: rotateY(180deg);
		position: absolute;
		bottom: 0;
	}

	.head_top .icon-jiantou {
		color: #333333;
		font-size: 30rpx;
	}

	.head_top {
		width: 100%;
		position: relative;
		/* padding-top: var(--status-bar-height); */
		height: 30px;
		line-height: 30px;
		color: #333333;
		font-size: 36rpx;
	}

	/* modal样式 */
	.modal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明黑色背景 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
	}

	/* modal-mask样式 */
	.modal-mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	/* modal-content样式 */
	.modal-content {
		background-color: #fff;
		/* 弹框背景色 */
		border-radius: 20rpx;
		/* 圆角 */
		padding: 40rpx;
		/* 内边距 */
		position: relative;
		/* 相对定位 */
		width: 50%;
		/* 修改宽度 */
		max-width: 600rpx;
		/* 设置最大宽度 */
	}

	.modal-header {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	/* 文字样式 */
	.modal-text {
		font-size: 30rpx;
		font-weight: 400;
		margin-bottom: 100rpx;
		text-align: center;
	}

	.warning-icon {
		width: 200rpx;
		height: 186rpx;
		align-items: center;
		margin-bottom: 50rpx;
	}

	.modal-body {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 100rpx;
	}

	/* 按钮样式 */
	.modal-buttons {
		margin-top: 20rpx;
		text-align: center;
	}

	.modal-buttons button {
		color: #fff;
		/* 按钮文字颜色 */
		border: none;
		/* 去除按钮边框 */
		border-radius: 30rpx;
		/* 圆角 */
		width: 130rpx;
		margin: 0 auto;
		font-size: 24rpx;
		/* 调整按钮文字大小 */
		cursor: pointer;
		/* 鼠标样式 */
		background-color: #f36a23;
		@include background_color("background_color");
	}

	.modal-buttons button:hover {
		@include background_color("background_color");
	}

	/* 关闭图标样式 */
	.close-icon {
		position: absolute;
		/* 绝对定位 */
		top: 20rpx;
		/* 距顶部的距离 */
		right: 20rpx;
		/* 距右侧的距离 */
		font-size: 26rpx;
		/* 图标大小 */
		cursor: pointer;
		/* 鼠标样式 */
	}

	.shop-btns {
		width: 710rpx;
		height: 92rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-left: 20rpx;
		color: #ff4c01;
		font-weight: 400;
		font-size: 28rpx;
		text-align: center;
		line-height: 92rpx;
	}

	.key-name {
		width: 200rpx;
	}

	.message-img {
		width: 40rpx;
		height: 38rpx;
	}

	.shop_info {
		flex: 1;
		box-sizing: border-box;
		padding-top: 10rpx;

		.icon.icon-jiantou1 {
			font-size: 28rpx;
			color: #fff;
			font-weight: 400;
		}
	}

	.starts {
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
		display: block;
	}

	.starts-box {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.bg-top {
		width: 750rpx;
		height: 617rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		background: linear-gradient(-180deg, #394263 0%, rgba(255, 255, 255, 0) 100%);
	}

	.task-center {
		padding: 16rpx 23rpx 18rpx 22rpx;
		// margin-top: -580rpx;
		margin: 20rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
		position: relative;
		z-index: 1;
	}

	.task-center1 {
		padding: 0 19rpx 0 23rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		position: relative;
		z-index: 1;
	}

	.task-center2 {
		padding: 20rpx 19rpx 20rpx 23rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
		position: relative;
		z-index: 1;
	}

	.task-center3 {
		padding: 12rpx 19rpx 0 23rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
		position: relative;
		z-index: 1;
	}

	.task-center4 {
		padding: 12rpx 19rpx 0 23rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
		position: relative;
		z-index: 1;
	}

	.task-center-item {
		height: 136rpx;
		background: #ffffff;
	}

	.task-center-item1 {
		height: 92rpx;
		background: #ffffff;
	}

	.tiltles {
		// width: 113rpx;
		white-space: nowrap;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.task-center-item2 {
		// height: 88rpx;
		background: #ffffff;
		padding: 20rpx 0;
	}

	.task-center-item3 {
		height: 88rpx;
		background: #ffffff;
	}

	.task-center-title {
		font-size: 32rpx;
		color: #121212;
		padding: 32rpx 0;
	}

	.task-logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 35rpx;
		flex-shrink: 0;
	}

	.task-points {
		width: 38rpx;
		height: 38rpx;
		margin-left: 14rpx;
		flex-shrink: 0;
	}

	.task-btns {
		width: 147rpx;
		height: 58rpx;
		border-radius: 29rpx;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1.5;
		margin-right: 26rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		border: 1rpx solid #eeeeee;
		background-color: #eeeeee;
		color: #666666;
	}

	.task-btns.active {
		@include border_color("border_color");
		@include background_color("background_color");
		@include text_color("text_color1");
	}

	.collected {
		width: 128rpx;
		height: 56rpx;
		border-radius: 26rpx;
		font-size: 24rpx;
		white-space: nowrap;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
		color: #fff;
		border: 1px solid;
		@include border_color("border_color");
		@include background_color("background_color");
	}

	.icon-he_15zhengzhaoguanli.icon {
		font-size: 32rpx;
		color: #333;
	}

	.icon-jiantou.icon {
		font-size: 26rpx;
		color: #333;
	}
</style>